<template>
	<div id="fashion">
		<div v-for="(item,index) in titles" :key=item.index id="sp" :class="{active: index === currentIndex}"
			@click="tabClick(index)">
			<!-- 选中谁  谁就变成红色 -->
			<span>{{item}}</span>
		</div>
		
		<div id="select">
			<selected v-if="this.currentIndex ==1"></selected>
			<popular v-else-if="this.currentIndex ==0"></popular>
			<new-style v-else-if="this.currentIndex ==2"></new-style>
		</div>
	</div>
</template>

<script>
	import Selected from '../../page/home/childComps/Selected.vue'
	import Popular from '../../page/home/childComps/Popular.vue'
	import NewStyle from '../../page/home/childComps/NewStyle.vue'
	export default {
		name: 'Fashion',
		props: { //用prpos作用就是我们可以从组件中传数据过来
			titles: {
				type: Array,
				default () {
					return []
				}
			}
		},
		components: {
			Selected,
			Popular,
			NewStyle
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		methods: {
			tabClick(index) {
				/* 切换选项卡 */
				this.currentIndex = index;
				this.$emit('tabClik', index)

			}
		}
	}
</script>

<style scoped>
	#fashion {
		display: flex;
		text-align: center;

	}

	#sp {
		flex: 1;
		height: 40px;
		line-height: 40px;
	}

	.active {
		color: red;

	}

	.active span {
		border-bottom: red solid 3px;
		/* 下划线 */
	}
	#select{
		text-align: center;
	}
</style>
